<template>
	<view>

		<swiper class="swiper-box" circular>
			<swiper-item v-for="(item, index) in shopImgsList" :key="index">
				<view class="swiper-item" :class="'swiper-item' + index">
					<img :src="shopImgsList[index]" alt="" />
				</view>
			</swiper-item>
		</swiper>

		<view class="info">
			<view class="title">
				{{shopList.name}}
			</view>
			<view class="rate">
				<uni-rate :readonly="true" size="20" :value="shopList.rate"  />
				<view>{{shopList.rate}}分</view>
				<view>销量：322</view>
			</view>
			<view class="time">
				营业时间：周一至周日 {{shopList.startTime}}-{{shopList.endTime}}
			</view>
			<view class="address">
				<view class="">
					{{shopList.address}}
				</view>
				<img src="/static/plane@2x.png" alt="" />
			</view>
		</view>

		<view class="service">
			<view class="title">
				服务
			</view>
			
			<view>
				<view class="uni-px-3 uni-pb-3 datacheckbox">
					<uni-data-checkbox v-model="radio" :localdata="service" @change='selectService'></uni-data-checkbox>
					<view class="serviceTyep">
						<image :src="selectitem.img" class="typeImage"></image>
						<view class="serviceTyepContent">
							<view class="text">{{selectitem.describe}}</view><strong></strong>
							<view class="money">
								<text>￥{{selectitem.originalPrice}}</text>
								<text>￥{{selectitem.currentPrice}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>

		<view class="evaluate">
			<view class="title">
				评价服务
			</view>
			<view class="evaluateList">
				<view class="evaluateItem">
					<view class="head">
						<img src="/static/touxiang.png" alt="" />
						<view class="userRate">
							<view class="name">
								李先生
							</view>
							<uni-rate :readonly="true" size="20" :value="2" />
						</view>
						<view class="dataTime">
							2022-09-10
						</view>
					</view>
					<view class="content">
						<view class="detail">
							服务评价内容服务评价内容服务评价内容服务评价内容服务评价内容服务评价内容服务评价内容服务评价内容
						</view>
						<image v-for="(item,index) in 4" class="evaluateimg" src="/static/pinglun.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>

		<view class="bottom">
			<view class="left">
				<img src="/static/kefu.png" alt="" @click="toggle('bottom')" />
				<view class="">
					联系客服
				</view>
			</view>
			<view class="btn" @click="submit">
				立即下单
			</view>
		</view>

		<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content">
				<view>1234545545</view>
				<view>呼叫</view>
				<!-- <view>取消</view> -->
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				radio: 0,
				selectitem: '',
				
				// 获取的店铺服务集合
				service: [],
				serviceList:[],
				// 选中的服务详情id ,下单时用这个字段就行
				serviceId:'',
				
				// 店铺的信息都在这里面,预约的信息直接从shopList里面取出来就行
				shopList:[],
				shopImgsList:[],
			}
		},

		onLoad(option) {
			console.log(option)
				// 获取token
				var token= uni.getStorageSync('Token');				
				// 获取上个页面点击店铺的id,
				// 然后将id赋值给请求体中的mId用于获取店铺的服务
				// var shopId = option.id;
				// var typeId = option.typeId
				var shopId = 6;
				var typeId = 3;
				
				// 获取指定店铺服务
				uni.request({
					 url: `http://localhost:7001/ruoyi-merchant/details/list`,
					    method: 'GET',
						data: {
							'mId': shopId,
							'typeId':typeId
						},
					    header: {
					        'Authorization': 'Bearer ' + token
					    },
					success: (res) => {
						if (res.statusCode === 200) {
							console.log("res...............................");
							console.log(res.data.rows);
							this.serviceList = res.data.rows
							this.service = this.serviceList.map(item => ({
							      text: item.name, // 将name赋值给text  
							      value: item.id, // 将id赋值给value  
							      describe: item.introduction , 
								  img: item.img ,
								  originalPrice: item.originalPrice ,
								  currentPrice: item.presentPrice ,
							    }));  
						} else {
							reject(`Failed to fetch details. Status code: ${res.statusCode}`);
						}
					},
					fail: (err) => {
						reject(`Request failed: ${err.errMsg}`);
					}
				});
				
				//获取门店基本信息
					uni.request({
						 url: `http://localhost:7001/ruoyi-merchant/shop/list`,
						    method: 'GET',
							data: {
								's.id': shopId,
							},
						    header: {
						        'Authorization': 'Bearer ' + token
						    },
						success: (res) => {
							if (res.statusCode === 200) {
								console.log("res2...............................");
								console.log(res.data.rows[0]);
								this.shopList = res.data.rows[0] 
							} else {
								reject(`Failed to fetch details. Status code: ${res.statusCode}`);
							}
						},
						fail: (err) => {
							reject(`Request failed: ${err.errMsg}`);
						}
					});
				
				
				//获取门店的轮播图
				uni.request({
					 url: `http://localhost:7001/ruoyi-merchant/shopImgs/list`,
					    method: 'GET',
						data: {
							'mId': shopId,
						},
					    header: {
					        'Authorization': 'Bearer ' + token
					    },
					success: (res) => {
						if (res.statusCode === 200) {
							console.log("res3...............................");
							console.log(res.data.rows[0].img);
							this.shopImgsList = res.data.rows[0].img.split(',');
						} else {
							reject(`Failed to fetch details. Status code: ${res.statusCode}`);
						}
					},
					fail: (err) => {
						reject(`Request failed: ${err.errMsg}`);
					}
				});
			
		},
		methods: {
			
			selectService(e) {
				this.selectitem = e.detail.data;
				this.serviceId = e.detail.data.value ;
				console.log(e.detail.data.value);
			},
			change(e) {
				let {
					index
				} = e.detail
				this.list[index].badge && this.list[index].badge++

				uni.showToast({
					title: `点击第${index+1}个宫格`,
					icon: 'none'
				})
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			submit(){
				uni.navigateTo({
					url:"/pages/index/carWash/confirmOrder/confirmOrder"
				})
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #A9ACAE;
	}

	.swiper-box {
		height: 200px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 200px;
		color: #fff;
	}

	.image {
		width: 750rpx;
	}

	/* #ifndef APP-NVUE */
	::v-deep .image img {
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-moz-user-drag: none;
		-o-user-drag: none;
		user-drag: none;
	}

	/* #endif */

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			margin: 0 auto;
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}


	.info,
	.service,
	.evaluate {
		padding-left: 16px;
		padding-right: 16px;
		padding-top: 17px;
		padding-bottom: 16px;
		background-color: #fff;
		margin-bottom: 5px;
		border: 2px solid #EFEFEF;
	}

	.title {
		font-weight: bold;
		font-size: 16px;
	}

	.rate {
		display: flex;
	}

	.rate>view:nth-child(1) {
		margin-left: 0px;
	}

	.rate>view:nth-child(2) {
		margin-left: 10px;
		color: #A9ACAE;
	}

	.rate>view:nth-child(3) {
		margin-left: 23px;
	}

	.time {
		margin-top: 6px;
		font-size: 14px;
	}

	.address {
		margin-top: 6px;
		font-size: 14px;
		display: flex;
	}

	.address>img {
		margin-left: 16px;
		width: 24px;
		height: 24px;
	}

	.money>text:nth-child(1) {
		color: #EA1703;
		font-size: 18px;
		margin-right: 17px;
	}

	.money>text:nth-child(2) {
		color: #808080;
		font-size: 10px;
		text-decoration: line-through;
		margin-left: -10px;
	}

	.datacheckbox {
		margin-top: 22px;
	}

	.money {
		margin-top: 20px;
	}

	.evaluateItem {
		border-bottom: 1px solid #808080;
	}

	.head {
		display: flex;
		justify-content: space-between;
	}

	.head>img {
		width: 40px;
		height: 40px;
		border-radius: 20px;
		margin-right: 16px;
	}

	.evaluate>.title {
		margin-bottom: 17px;
	}

	.userRate {
		margin-left: -110px;
	}

	.userRate>view {
		margin-top: -4px;
		margin-bottom: 9px;
	}

	.content {
		padding-left: 57px;
	}

	.evaluateimg {
		width: 100px;
		height: 75px;
		margin-right: 30px;
		margin-bottom: 20px;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		display: flex;
		width: 100%;
		height: 50px;
		justify-content: space-between;
	}

	.left {
		text-align: center;
		margin-left: 7px;
	}

	.left>img {
		height: 24px;
		width: 24px;
	}

	.btn {
		width: 110px;
		height: 50px;
		line-height: 50px;
		font-size: 16px;
		text-align: center;
		background-color: #F44444;
		color: #fff;
	}

	.popup-content {
		text-align: center;
	}

	.popup-content>view {
		height: 50px;
		line-height: 50px;
	}
	
	.typeImage{
		width: 100px;
		height: 100px;
	}
	.serviceTyep{
		display: flex;
		padding-top: 10px;
	}
	.serviceTyepContent{
		margin-left: 15px;
	}
	.serviceTyepContent view:nth-child(1){
		margin-top: 5px;
		width: 185px;
		font-size: 15px;
	}
	
</style>